<template>
	<view>
		<view class="couponContain" :style="{'background-color':backgroundColor}" @click="openDia">
			<view class="leftItem">
				<image src="../../static/images/laba.png" class="leftPic"></image>
				<view class="componTitle">
					拼团公告
				</view>
			</view>
			<view class="itemright">
				<view class="content">
					参加拼团福利多多，快来参加吧！！！
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		props: {
			backgroundColor: {
				type: String,
				default: '#41914b'
			},
			btnWidth: {
				type: String,
				default: '500rpx'
			},
			radius: {
				type: String,
				default: '20rpx'
			},
			height: {
				type: String,
				default: '60rpx'
			}
		},
		data() {
			return {

			};
		},
		methods: {
			openDia() {
				uni.navigateTo({
					url:'/pages/lottery/lottery?id='+1
				})
			}
			
		}
	}
</script>

<style lang="scss">
	.couponContain {
		width: 680rpx;
		height: 68rpx;
		font-size: 28rpx;
		margin: 15rpx auto;
		border-radius: 8rpx;
		@extend %flexBetw;
		padding: 0 26rpx;

		.modalTitle {
			width: 100%;
			height: 150rpx;
			position: relative;
			background-color: rgba(#fff, 0.1);

			.titleImg {
				width: 100%;
				height: 150rpx;
				position: absolute;
				top: -30rpx;
				left: 0;
			}
		}

		.closeBtn {
			margin: 20rpx auto;
			background-color: #ff4544;
			@extend %flexAlCenter;
			color: #fff;
		}

		.coumonContent {
			line-height: 40rpx;
			padding: 20rpx 26rpx;
		}

		.leftItem {
			width: 246rpx;
			position: relative;
			@extend %flexBetw;

			.leftPic {
				width: 36rpx;
				height: 36rpx;
			}

			.componTitle {
				width: 180rpx;
				@extend %textover;
				color: #fff;


			}
		}

		.itemright {
			width: 450rpx;
			color: #fff;
			overflow: hidden;
			padding: 0 25rpx;

			.content {
				padding: 0 26rpx;
				white-space: nowrap;
				animation: 10s wordsLoop linear infinite normal;

			}
		}
	}

	@keyframes wordsLoop {
		0% {
			transform: translateX(400rpx);
			-webkit-transform: translateX(400rpx);
		}

		100% {
			transform: translateX(-100%);
			-webkit-transform: translateX(-100%);
		}
	}
</style>
